<template>
<!--  搜索框 -->
  <div class="search-div">
    <el-form label-width="70px" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-select
                v-model="queryData.brandId"
                class="m-2"
                placeholder="选择品牌"
                size="small"
                style="width: 100%"
            >
              <el-option
                  v-for="item in brandList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类">
            <el-cascader
                v-model="checkCategoryIdList"
                :props="categoryProps"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchForm()">
          搜索
        </el-button>
        <el-button size="small" @click="queryData.brandId = null, queryData.categoryId=null,checkCategoryIdList = []" >重置</el-button>
      </el-row>
    </el-form>
  </div>

  <div class="tools-div">
    <el-button type="success" size="small" @click="centerDialogVisible=true" >添 加</el-button>
  </div>

  <el-table :data="list" style="width: 100%">
    <el-table-column prop="categoryName" label="分类" />
    <el-table-column prop="brandName" label="品牌" />
    <el-table-column prop="logo" label="品牌图标" #default="scope">
      <img :src="scope.row.logo" width="50" />
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" align="center" width="200" >
      <template #default="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row),centerDialogVisible=true" >
          修改
        </el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row)" >
          删除
        </el-button>
      </template>

    </el-table-column>
  </el-table>

  <el-pagination
      v-model:page-size="queryData.pageSize"
      v-model:current-page="queryData.pageNum"

      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next"
      :total="total"
  />


  <el-dialog v-model="centerDialogVisible" title="新增或修改品牌分类" width="50%" center>

    <el-form label-width="70px" size="small">
      <el-form-item label="品牌">
        <el-select
            v-model="submitData.brandId"
            class="m-2"
            placeholder="选择品牌"
            size="small"
            style="width: 100%"
        >
          <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="分类">
        <el-cascader
            v-model="submitCheckCategoryIdList"
            :props="categoryProps"
            style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false,submitHandler()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {getAllBrandList} from "@/api/brand"
import {getCateListByParentId} from "@/api/category";
import {getCategoryBrandPageList,addCategoryBrand,modifyCategoryBrand,removeCateBrand} from "@/api/categoryBrand"
import {ElMessage} from "element-plus";

const centerDialogVisible = ref(false)
// ================数据模型定义  start ===============================================
// 定义搜索表单数据模型
const brandList = ref([
  {
    "id": 2,
    "createTime": "2023-05-06 09:31:19",
    "name": "华为",
    "logo": "http://139.198.127.41:9000/sph/20230506/华为.png"
  },
  {
    "id": 1,
    "createTime": "2023-05-06 09:30:27",
    "name": "小米",
    "logo": "http://139.198.127.41:9000/sph/20230506/小米.png"
  }
])


const checkCategoryIdList = ref([])
const submitCheckCategoryIdList = ref([])
const props = {
  lazy: true,
  value: 'id',
  label: 'name',
  leaf: 'leaf',
  async lazyLoad(node, resolve) {   // 加载数据的方法
    if ( typeof  node.value === 'undefined' ) node.value = 0;
    const {data} = await getCateListByParentId(node.value);
    data.forEach(item => {
      item.leaf = ! item.hasChildren
    })
    resolve(data)


    //懒加载数据
  }
};
const categoryProps = ref(props)

// 定义表格数据模型
const list = ref([
  {
    "id": 2,
    "createTime": "2023-05-24 15:19:24",
    "brandId": 1,
    "categoryId": 99,
    "categoryName": "定制服务",
    "brandName": "小米",
    "logo": "http://139.198.127.41:9000/sph/20230506/小米.png"
  },
  {
    "id": 1,
    "createTime": "2023-05-06 10:59:08",
    "brandId": 2,
    "categoryId": 76,
    "categoryName": "UPS电源\t",
    "brandName": "华为",
    "logo": "http://139.198.127.41:9000/sph/20230506/华为.png"
  }
])

// 分页条数据模型
const total = ref(0)

//定义分页查询和条件查询数据模型
const
    queryData = ref({
  pageNum: 1,
  pageSize: 10,
  brandId: null,
  categoryId: null
})

const submitData = ref({
  id: null,
  brandId: null,
  categoryId: null
})
//======   数据模型定义end========================================================

// 获取所有品牌数据
const setBrandList = async () =>{
 const {code,data} =  await getAllBrandList();
 if(code == 200){
   brandList.value = data
 }
}
//搜索分类选择框
const searchForm = async ()=>{
  //判断是否选择分类
  if (checkCategoryIdList.value.length==3){
    queryData.value.categoryId = checkCategoryIdList.value[2];
  }else {
    queryData.value.categoryId = null;
  }
   const {data} =  await getCategoryBrandPageList(queryData.value);
  list.value = data.list
}

//添加或者修改提交
const submitHandler =  async ()=>{
  submitData.value.categoryId = submitCheckCategoryIdList.value[2];
  //添加
  if (submitData.value.id == null || typeof submitData.value.id == 'undefined'){

    const {code,message} =  await addCategoryBrand(submitData.value)
    if(code == 200){
      ElMessage.success(message)
    }else{
      ElMessage.error(message)
    }


  }else {
    //修改
    const {code,message} =  await modifyCategoryBrand(submitData.value)

    if(code == 200){
      ElMessage.success(message)
    }else{
      ElMessage.error(message)
    }
  }
  searchForm()
}
//处理修改逻辑 (给summitData赋值)
const handleEdit = (row) =>{
  submitData.value.id = row.id;
  submitData.value.categoryId = row.categoryId;
  submitData.value.brandId = row.brandId;
}

//删除按钮直接删除数据
const handleDelete = async (row)=>{
  submitData.value.id = row.id
 const {message} = await removeCateBrand(submitData.value);
 ElMessage.success(message);
  searchForm()
}
onMounted(()=>{
  setBrandList()
  searchForm()
})
</script>
<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>